Верстка верхнего меню

[an1401]

Здравствуйте уважаемые, у меня такой вопрос...

Нужен результат вот такой:

при навидение на ссылку у ней появляется вот такой фон.

Никак не пойму как это сделать, помогите пожалуйста советом.

код:

<div id="top_menu">
    <ul>
    <li><a href="/">Главная страница</a></li>
    <li><a href="/">О компании</a></li>
    <li><a href="/">Услуги</a></li>
    <li><a href="/">Популярное</a></li>
    <li><a href="/">Контактная информация</a></li>
    </ul>
</div>

[Softlink]

А у меня опять любимый вопрос: под какие браузеры верстаем, что поддерживаем, что лесом?

[an1401]

А у меня опять любимый вопрос: под какие браузеры верстаем, что поддерживаем, что лесом?

желательно, под все, ie6 можно лесом

[Softlink]

Эх, а я уже было обрадовался

[psywalker]

Эх, а я уже было обрадовался

Вот тебе, твоё знание CSS3 и не пригодилось) А как сделать на CSS2, в курсе? Вот на таких вещах опыт и набирается.

[Softlink]

Эх, а я уже было обрадовался

Вот тебе, твоё знание CSS3 и не пригодилось) А как сделать на CSS2, в курсе? Вот на таких вещах опыт и набирается.

Да ладно тебе, чего же не в курсе-то? Но копаться я не хочу с этими ИЕ, честно

Тут все простенько, быстренько, аккуратненько

p.s. делегирую тебе эту почетную миссию! А я пойду дальше разбираться с Оперой и border-radius

Edited August 23, 2011 by Softlink

[an1401]

Эх, а я уже было обрадовался

Спасибо, если придерживаться заданного дизайна, внешний вид меню можно отредактировать?

Возможно это реализовать например через фоновые картинки элементов?

Например эту картинку порезать как нибудь и присвоить фоном элементам, ну чтобы было как в заданном дизайне?

[psywalker]

an1401,

Вот, смотри. Делаешь по такому же сценарию. http://psywalker.ru/Forum/Menu/10/menu/main-page.html

А дальше уже пихаешь в пункты ещё один тег, для нижней хрени. Её абсолютом в середину.

Эх, а я уже было обрадовался

Вот тебе, твоё знание CSS3 и не пригодилось) А как сделать на CSS2, в курсе? Вот на таких вещах опыт и набирается.

Да ладно тебе, чего же не в курсе-то? Но копаться я не хочу с этими ИЕ, честно

Тут все простенько, быстренько, аккуратненько

p.s. делегирую тебе эту почетную миссию! А я пойду дальше разбираться с Оперой и border-radius

Блин, а чё, не сделал что ли ещё?

[Softlink]

an1401,

Вот, смотри. Делаешь по такому же сценарию. http://psywalker.ru/Forum/Menu/10/menu/main-page.html

А дальше уже пихаешь в пункты ещё один тег, для нижней хрени. Её абсолютом в середину.

Эх, а я уже было обрадовался

Вот тебе, твоё знание CSS3 и не пригодилось) А как сделать на CSS2, в курсе? Вот на таких вещах опыт и набирается.

Да ладно тебе, чего же не в курсе-то? Но копаться я не хочу с этими ИЕ, честно

Тут все простенько, быстренько, аккуратненько

p.s. делегирую тебе эту почетную миссию! А я пойду дальше разбираться с Оперой и border-radius

Блин, а чё, не сделал что ли ещё?

Да там короче отказались от этой затеи совсем. Т.е. меня спросили, как можно это сделать, ну я сказал, что без скриптов, наверное, не получится. Ну и все. А теперь у меня спортивный интерес. Сижу пробую разные способы, может где-нибудь вылезет то что надо.

[psywalker]

Да там короче отказались от этой затеи совсем. Т.е. меня спросили, как можно это сделать, ну я сказал, что без скриптов, наверное, не получится. Ну и все. А теперь у меня спортивный интерес. Сижу пробую разные способы, может где-нибудь вылезет то что надо.

Ага, отлично, если чё получится, пиши мне сразу))

[Softlink]

Да там короче отказались от этой затеи совсем. Т.е. меня спросили, как можно это сделать, ну я сказал, что без скриптов, наверное, не получится. Ну и все. А теперь у меня спортивный интерес. Сижу пробую разные способы, может где-нибудь вылезет то что надо.

Ага, отлично, если чё получится, пиши мне сразу))

Обязательно Если получится...

[an1401]

А размер треугольника снизу можно как нибудь увеличить, через ваш предложенный вариант?

[Softlink]

А размер треугольника снизу можно как нибудь увеличить, через ваш предложенный вариант?

Конечно Он меняется вот здесь:

border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid #4472e8;

left и right это бедра треугольника, top - основание его. Поиграйтесь, посмотрите.

[Vlad]

Треугольник границами формируется, есть такая хитрушка в CSS. Вообще, вариант, который Softlink предложил самый лучший. Под IE6-8 его можно доработать так, чтобы в этих браузерах только полоса появлялась синяя без скруглений. Некрасиво да, но пусть мучаются пользователи, раз такое старьё у них.

[an1401]

А размер треугольника снизу можно как нибудь увеличить, через ваш предложенный вариант?

Вроде разобрался как увеличить?

Подскажите по css? что для чего

li a:hover:after{
content: ' '; —--?
position:absolute; —- понятно.
border-left: 10px solid transparent; —-?
border-right: 10px solid transparent; —--?
border-top: 5px solid #2B6DB7; —-?
bottom:-4px; —-- понятно
left:43%; —- понятно
}

[Softlink]

Здесь мы использовали псевдоэлемент

li a:hover:after{
content: ' '; мы можем задать какой-нибудь контент для него. Т.е. он может выполнять не только декоративную функцию.
position:absolute; —- понятно.
Вот то, что ниже(3 строчки) - это мнимый прямоугольник. Мы у него отрезали два угла путем задания только трех бордеров. Однако каждый бордер должен иметь свой цвет. Если мы оставим какой-нибудь цвет для любого из бедер, то получится некрасиво и совсем не то, что надо. Поэтому мы через transparent делаем их прозрачными, оставляя цвет только для основания. Кстати изменение его значения будет либо вытягивать либо уменьшать высоту треугольника. 
border-left: 10px solid transparent; 
border-right: 10px solid transparent;
border-top: 5px solid #2B6DB7;

bottom:-4px; —-- понятно
left:43%; —- понятно
}

В общем, поиграйтесь со значениями, станет все понятно.

[psywalker]

А размер треугольника снизу можно как нибудь увеличить, через ваш предложенный вариант?

Вроде разобрался как увеличить?

Подскажите по css? что для чего

li a:hover:after{
content: ' '; —--?
position:absolute; —- понятно.
border-left: 10px solid transparent; —-?
border-right: 10px solid transparent; —--?
border-top: 5px solid #2B6DB7; —-?
bottom:-4px; —-- понятно
left:43%; —- понятно
}

content: ' '; —--?

Чтобы псевдоэлемент отобразился, у него должен быть какой нибудь контент.

border-left: 10px solid transparent; —-?

border-right: 10px solid transparent; —--?

border-top: 5px solid #2B6DB7; —-?

Для квадратика.

[Nekromancer]

Вот ещё есть ссылка почитать, если интересно - http://habrahabr.ru/blogs/css/126207/.

[an1401]

Вот ещё есть ссылка почитать, если интересно - http://habrahabr.ru/blogs/css/126207/.

а если вместо треуголка будет типа вот этой фигура:

как в этом случае ее реализовать?

[psywalker]

Вот ещё есть ссылка почитать, если интересно - http://habrahabr.ru/blogs/css/126207/.

а если вместо треуголка будет типа вот этой фигура:

как в этом случае ее реализовать?

Картинкой.

[Softlink]

Вот ещё есть ссылка почитать, если интересно - http://habrahabr.ru/blogs/css/126207/.

а если вместо треуголка будет типа вот этой фигура:

как в этом случае ее реализовать?

это какая фигура-то? Треугольник с наклоном или что?

[psywalker]

Вот ещё есть ссылка почитать, если интересно - http://habrahabr.ru/blogs/css/126207/.

а если вместо треуголка будет типа вот этой фигура:

как в этом случае ее реализовать?

это какая фигура-то? Треугольник с наклоном или что?

ИЕ6 будет пофиг твой наклон) Для него картинка - самый проверенный и надёжный способ.

[an1401]

Вот ещё есть ссылка почитать, если интересно - http://habrahabr.ru/blogs/css/126207/.

а если вместо треуголка будет типа вот этой фигура:

как в этом случае ее реализовать?

Картинкой.

круто, спасибо

[Softlink]

http://jsfiddle.net/PMWPL/7/

[an1401]

Добрый день!

И все же у меня никак не получается сделать такое:

прием используемый выше, не дает желаемого результата.

Если делать выделение тэга li фоном, то все пункты меню становятся одинаковой ширины, что в данном случае не подходит, так как названия пунктов меню разные(одно, два слова)...

Что посоветуете в этом случае?

[Gaspode]

Навскидку предложу. Сделайте картинку с этими уголками, но ооооочень длинную, чтобы наверняка на любой пункт хватило. Дальше так примерно:

li {
   padding-right: ширина_правого_уголка;
}

li a {
   display: block;
   height: 100%;   
}

li:hover {
   background: url(картинка) left top no-repeat;
}

li:hover a {
   background: url(картинка) right top no-repeat;
}


[...]


<li><a href="#">Ссылка</a></li>

Поковырять надо ещё, чтоб подогнать под ваш случай. Но принцип тот же.

UPD Лучше, наверно, внутрь ссылки вложить спан, и задавать фоны не для li и ссылки, а для ссылки и спана. Надо только отступы так подобрать, чтобы из-под правого уголка подложка не проглядывала.

Edited August 25, 2011 by Gaspode